<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: xiezhiquan3878 xiezhiquan3878
 * @LastEditTime: 2024-06-23 19:28:57
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-dialog
      title="AI问题生成"
      :visible.sync="popShow"
      custom-class="video-dialog"
      :before-close="cancelFun"
      destroy-on-close
    >
      <el-form
        ref="form"
        :model="editData"
        label-width="120px"
        label-position="top"
        size="small"
      >
        <el-form-item label="文章标题">
          <el-input
            v-model="editData.doc_title"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="文章内容">
          <el-input
            v-model="editData.doc_content"
            type="textarea"
            placeholder="请输入"
            :rows="2"
          />
        </el-form-item>
        <el-form-item label="生成数量">
          <el-input-number
            v-model="editData.gen_sum"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="参考问题列表"
          style="position: relative"
        >
          <div class="box">
            <div
              v-for="(item, i) in editData.simq_list"
              :key="i"
              class="flex box-item"
            >
              <img
                @click="removeLink(i)"
                src="@/assets/images/model/delete.png"
                alt=""
                class="delete-icon"
              />
              <el-input
                v-model="editData.simq_list[i]"
                placeholder="关联问答信息"
              />
            </div>
          </div>
          <div
            class="text-#04D1B8 cursor-pointer add"
            @click="addLink"
          >
            <img
              src="@/assets/images/model/add.png"
              alt=""
            />
            增加参考问题
          </div>
        </el-form-item>
      </el-form>
      <div class="demo-drawer-footer">
        <el-button @click="cancelFun">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmClick()"
        >
          保存
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择"
      :visible.sync="showChooseQuestions"
      width="50%"
    >
      <div class="generate-faq">
        <el-table
          :data="qa_items_list"
          style="width: 100%"
        >
          <el-table-column
            prop="simq_id"
            label="id"
          ></el-table-column>
          <el-table-column
            prop="question"
            label="标准问题"
          ></el-table-column>
          <el-table-column
            prop="answer"
            label="标准答案"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div
                v-show="!scope.row.check"
                class="text-#04D1B8 cursor-pointer"
                @click="makeSure(scope.$index, scope.row)"
              >
                选择
              </div>
              <div
                v-show="scope.row.check"
                class="text-#9E9E9E cursor-pointer"
                @click="makeUnSure(scope.$index, scope.row)"
              >
                已选择
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showChooseQuestions = false">取 消</el-button>
        <el-button
          type="primary"
          @click="clickSure"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { nlpAgency, addQuestion } from '@/api/model'
var that = null
var timer = null
export default {
  components: {},
  props: {
    popShow: {
      type: Boolean,
      default: false
    }
    // data: {
    //   type: Object,
    //   default: function () {
    //     return {
    //       id: ''
    //     }
    //   }
    // }
  },
  data() {
    return {
      editData: {
        doc_title: '',
        doc_content: '',
        gen_sum: 1,
        simq_list: []
      },
      task_id: null,
      qa_items_list: [],
      fullscreenLoading: false,
      showChooseQuestions: false
    }
  },
  watch: {
    popShow(val) {
      if (val) {
        this.$nextTick(() => {
          this.showPop()
        })
      }
    }
  },
  created() {},
  methods: {
    removeLink(i) {
      this.editData.simq_list.splice(i, 1)
    },
    addLink() {
      this.editData.simq_list.push('')
    },
    showPop() {
      this.editData = {
        doc_title: '',
        doc_content: '',
        gen_sum: 1,
        simq_list: []
      }
    },
    // 确认
    confirmClick() {
      this.fullscreenLoading = true
      nlpAgency({
        path: '/v1/pinzhi/related_qa/',
        method: 'POST',
        data: { ...this.editData }
      })
        .then((resp) => {
          let res = resp.data
          if (res && res.response && res.response.content.code === 0) {
            this.task_id = res && res.response && res.response.content.task_id
            this.queryAnswers()
          } else {
            this.fullscreenLoading = false
            that.$message({
              type: 'error',
              message:
                (res && res.response && res.response.content.msg) ||
                '接口出错，请稍后重试'
            })
          }
        })
        .catch((err) => {
          this.fullscreenLoading = false
          console.log(err)
          that.$message({
            type: 'error',
            message: err.msg
          })
        })
    },
    clearTimer() {
      clearInterval(timer)
      timer = null
      this.fullscreenLoading = false
    },
    queryAnswers() {
      nlpAgency({
        path: '/v1/pinzhi/get_related_qa/',
        method: 'GET',
        data: { task_id: this.task_id }
      })
        .then((resp) => {
          let res = resp.data
          console.log(res)
          if (res && res.response && res.response.content.code === 0) {
            that.qa_items_list = res.response.content.qa_items_list
            // that.showGenerateFaq = false
            this.$emit('cancel')
            that.showChooseQuestions = true
            this.selectTxt = []
            that.clearTimer()
          } else if (res && res.response && res.response.content.code === 1) {
            if (!timer) {
              timer = setInterval(() => {
                that.queryAnswers()
              }, 3000)
            }
          } else {
            this.fullscreenLoading = false
            that.$message({
              type: 'error',
              message:
                (res && res.response && res.response.content.msg) ||
                '接口出错，请稍后重试'
            })
          }
        })
        .catch((err) => {
          this.fullscreenLoading = false
          console.log(err)
          that.$message({
            type: 'error',
            message: err.msg
          })
        })
    },
    cancelFun() {
      this.$emit('cancel')
    },
    makeSure(i, item) {
      this.$set(this.qa_items_list[i], 'check', true)
      this.selectTxt.push(item.simq_id)
    },
    makeUnSure(i, item) {
      this.$set(this.qa_items_list[i], 'check', false)
      let index = this.selectTxt.findIndex((v) => v === item.simq_id)
      this.selectTxt.splice(index, 1)
    },
    clickSure() {
      let arr = this.qa_items_list.filter((v) =>
        this.selectTxt.includes(v.simq_id)
      )
      // 创建faq
      Promise.all(
        arr.map((v) => {
          let _obj = {
            model_uniqueid: this.$route.query.uid,
            question: v.question,
            answer_text: v.answer,
            faq_simq_list: '',
            generate_switch: 1
          }
          return addQuestion(_obj)
        })
      )
        .then((res) => {
          console.log(res)
          this.$message({
            message: '创建成功！',
            type: 'success'
          })
          this.showChooseQuestions = false
          this.$emit('success')
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            type: 'error',
            message: err.msg
          })
        })
    }
  },
  mounted() {
    that = this
  }
}
</script>
<style lang="scss" scoped>
.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}
.demo-drawer-content {
  margin-top: -10px;
  padding: 0 138px 0;
  height: calc(100vh - 85px);
  overflow-y: auto;
}
.demo-drawer-footer {
  text-align: center;
  margin-top: 10px;
}
::v-deep {
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    color: #1c1f23;
    line-height: 22px;
  }
  .avatar-uploader-box .avatar-uploader .el-upload {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.btn-fix {
  position: absolute;
  left: 70px;
  top: -36px;
  font-size: 12px;
  cursor: pointer;
}
.box {
  background: #f4f5f9;
  border-radius: 0px 0px 0px 0px;
  padding: 12px;
  .box-item {
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .delete-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    padding: 8px;
    cursor: pointer;
  }
}
.add {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
  img {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
  }
}
</style>
